<template>
    <div>
        <page-header title="新建团队" />
        <page-main>
            <el-row>
                <el-col :md="24" :lg="12">
                    <el-form ref="form" :model="form" label-width="120px">
                        <el-form-item label="团队名称">
                            <el-input v-model="form.name1" />
                        </el-form-item>
                        <el-form-item label="团队队长">
                            <el-input v-model="form.name2" />
                        </el-form-item>
                        <el-form-item label="团队领域">
                            <el-input v-model="form.name3" />
                        </el-form-item>
                        <el-form-item label="团队描述">
                            <el-input v-model="form.desc" type="textarea" />
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-button icon="el-icon-plus" type="text" @click="open">邀请成员</el-button>
        </page-main>
        <fixed-action-bar>
            <el-button type="primary">立即创建</el-button>
            <el-button>取消</el-button>
        </fixed-action-bar>
    </div>
</template>

<script>
export default {
    name: 'NewTeamIndex',
    data() {
        return {
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            }
        }
    }, 
    methods: {
        open() {
            this.$prompt('请输入成员ID号/手机号/邮箱', '邀请成员', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                inputErrorMessage: '格式不正确'
            }).then(({ value }) => {
                this.$message({
                    type: 'success',
                    message: '你邀请的是: ' + value
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                })       
            })
        }
    }
}
</script>
